
Refresh.Web.Floatie = Class.create();
Refresh.Web.Floatie.prototype = {
	
	// distance from mouse
	offsetX: 0,
	offsetY: -20,
	minOpacity: 25,
	
	maxDistance: 25,

	initialize: function(id,toolbarSettings) {
		toolbarSettings.cssPrefix = 'floatie_';
		this.editors = toolbarSettings.editors;
		this.toolbar = new Refresh.Web.Toolbar(id, toolbarSettings);
		
		
		// ensure style
		Refresh.Utility.ensureFloatie(this.toolbar.settings.theme);
		
		//var ftbPos = Position.positionedOffset(this.ftb._designEditor); 
		//this.ftbPos = {x:ftbPos[0], y:ftbPos[1]};
	
		// create new container
		this._container = Refresh.Web.HTML.append(document.body,'div',{id:this.toolbar.id + '_FollowContainer'});
		
		if (this.toolbar.node.parentNode != null)
			this.toolbar.node.parentNode.removeChild(this.toolbar.node);
		
		this._container.appendChild(this.toolbar.node);		
		this.toolbarSize = Element.getDimensions(this.toolbar.node.childNodes[0]); 

		this._container.style.position = 'absolute';
		this._container.style.zIndex = '1000';
		this._container.style.top = '0';
		this._container.style.left = '0';
		this._container.style.width = '250px'; // should this be adjusted?
		
		this.hide();
		
	    this._event_onDblClick = this._onDblClick.bindAsEventListener(this);	
	    this._event_onClick = this._onClick.bindAsEventListener(this);	
		this._event_onMouseMoveEditor = this._onMouseMoveEditor.bindAsEventListener(this);			
		this._event_onMouseMoveDocument = this._onMouseMoveDocument.bindAsEventListener(this);
		
		this.addDoubleClickEvent();
	},
	
	addDoubleClickEvent: function() {
		var floatie=this;
		//ftb.addEventListener('dblclick', this._event_onDblClick);
		var initialized = true;
		for (var i=0; i<this.editors.length; i++) {
			if (!this.editors[i].initialized || this.editors[i]._getDocument().body == null) {
				initialized = false;
				break;
			}
		
		}
		
		if (initialized) {			
			for (var i=0; i<this.editors.length; i++) {
				var ftb = this.editors[i];
				Event.observe(ftb._getDocument().body, 'dblclick', floatie._event_onDblClick);
				this.toolbar.associateEditor(ftb);
			}
		} else {
			setTimeout(function() { 
				floatie.addDoubleClickEvent();
			}, 250);		
		}
	},

	getScroll: function(doc) {

		//
		//
		
		if (this.ftb.browser.isIE) {
			return {x:0, y:0}; // somehow ie doesn't need this when inside FTB
		} else {
	
			var scrollX = doc.documentElement.scrollLeft
					|| doc.body.scrollLeft
					|| 0;
			var scrollY = doc.documentElement.scrollTop
					|| doc.body.scrollTop
					|| 0;	
			return {x:scrollX, y:scrollY};
		}
		

	},	
	
	_onDblClick: function(e) {
		// trace editor
		var ftb = null;
		
		if (this.editors.length == 1) {
			ftb = this.editors[0];
		} else {
			var el = Event.element(e);
			
			// find BODY
			while (el.tagName.toLowerCase() != 'body' && el.parentNode) 
				el = el.parentNode;
				
			// check for which editor matches
			for (var i=0; i<this.editors.length; i++) {

				if (this.editors[i]._getDocument().body == el) {
					ftb = this.editors[i];
					break	
				}
			}
		}

		if (ftb == null)
			return;		
			
		this.ftb = ftb;
	
		// show so that the size measure ment is correct
		this.show();
		
		// get toolbar size		
		this.toolbarSize = Element.getDimensions(this.toolbar.node); 		
		
		var mouse = {x: Event.pointerX(e), y: Event.pointerY(e)};
		
		var ftbPos = Position.positionedOffset(this.ftb._designEditor); 
		this.ftbPos = {x:ftbPos[0], y:ftbPos[1]};
		
		this.docScrollPos = this.getScroll(this.ftb._getDocument());				
		this.mousePos = {x: mouse.x + this.ftbPos.x - this.docScrollPos.x, y: mouse.y + this.ftbPos.y - this.docScrollPos.y};
		this.dblClickPos = this.mousePos;
		
		this.containerPos = {x: this.dblClickPos.x + this.offsetX, y: this.dblClickPos.y + this.offsetY - this.toolbarSize.height};
		this.setPosition(this.containerPos.x, this.containerPos.y);
		
		//this.show();
		this.setOpacity();
		
		Event.observe(this.ftb._getDocument().body, 'click', this._event_onClick);	
		Event.observe(this.ftb._getDocument().body, 'mousemove', this._event_onMouseMoveEditor);	
		Event.observe(document, 'mousemove', this._event_onMouseMoveDocument);		
		Event.observe(document, 'click', this._event_onClick);		
	},
	
	_onClick: function(e) {
		var x = Event.pointerX(e);
		var y = Event.pointerY(e);
		
		// check for click out
		var clickedOut = !Position.within(this.toolbar.node, x, y);
		if (clickedOut && this.toolbar.visibleElement !== null)
			clickedOut = !Position.within(this.toolbar.visibleElement,x, y);		
	
		if (clickedOut) {
			this.hide();
			this.dblClickX = -1;
			this.dblClickY = -1;
			Event.stopObserving(this.ftb._getDocument().body, 'click', this._event_onClick);	
			Event.stopObserving(this.ftb._getDocument().body, 'mousemove', this._event_onMouseMoveEditor);
			Event.stopObserving(document, 'mousemove', this._event_onMouseMoveDocument);
			Event.stopObserving(document, 'click', this._event_onClick);				
		}
	},
	
	_onMouseMoveEditor: function(e) {	

		this.docScrollPos = this.getScroll(this.ftb._getDocument());
		
		var mouse = {x: Event.pointerX(e), y: Event.pointerY(e)};
	
		this.mousePos = {x: mouse.x + this.ftbPos.x - this.docScrollPos.x, y: mouse.y + this.ftbPos.y - this.docScrollPos.y};
			
		this.setOpacity();
	},
	
	_onMouseMoveDocument: function(e) {	
		this.docScrollPos = this.getScroll(document);
		
		var mouse = {x: Event.pointerX(e), y: Event.pointerY(e)};		
	
		this.mousePos = {x: mouse.x - this.docScrollPos.x, y: mouse.y - this.docScrollPos.y};
			
		this.setOpacity();
	},	
	
	
	hide: function() {
		this._container.style.display= 'none';
	},

	show: function() {
		this._container.style.display= '';
	},

	setPosition: function(x,y) {
		this._container.style.top = y + 'px';
		this._container.style.left = x + 'px';
	},
	
	setOpacity: function() {
		
		if (this.toolbar.visibleElement !== null) 
			return;
		
		// which region is the mouse in (four sides or four corners)
		var comparePoint = {};
		
		if  (this.mousePos.y < this.containerPos.y) { // above
			if (this.mousePos.x < this.containerPos.x) { // above left
				comparePoint = {x:this.containerPos.x, y:this.containerPos.y};
			} else if (this.mousePos.x > this.containerPos.x + this.toolbarSize.width) { // above right
				comparePoint = {x:this.containerPos.x + this.toolbarSize.width, y:this.containerPos.y};
			} else { // above center		
				comparePoint = {x:this.mousePos.x, y:this.containerPos.y};
			}
		} else if ( this.mousePos.y > this.containerPos.y + this.toolbarSize.height) { // below
		
			if (this.mousePos.x < this.containerPos.x) { // below left
				comparePoint = {x:this.containerPos.x, y:this.containerPos.y+this.toolbarSize.height};
			} else if (this.mousePos.x > this.containerPos.x + this.toolbarSize.width) { // below right
				comparePoint = {x:this.containerPos.x + this.toolbarSize.width, y:this.containerPos.y+this.toolbarSize.height};
			} else { // below center
				comparePoint = {x:this.mousePos.x, y:this.containerPos.y+this.toolbarSize.height};
			}			
		
		} else { // middle
			if (this.mousePos.x < this.containerPos.x) { // middle left
				comparePoint = {x:this.containerPos.x, y:this.mousePos.y};
			} else if (this.mousePos.x > this.containerPos.x + this.toolbarSize.width) { // middle right
				comparePoint = {x:this.containerPos.x + this.toolbarSize.width, y:this.mousePos.y};
				
			} else { // below center
				comparePoint = {x:this.mousePos.x, y:this.mousePos.y};
			}		
		}
		
		var xd = Math.abs( Math.abs(comparePoint.x) - Math.abs(this.mousePos.x));
		var yd = Math.abs( Math.abs(comparePoint.y) - Math.abs(this.mousePos.y));
		var distance = Math.sqrt( Math.pow(xd,2) + Math.pow(yd,2));
			
		var opacity = 0;
		if (distance < this.maxDistance) {
			opacity = (this.maxDistance-distance)/this.maxDistance*100;
		}
		
		Refresh.Utility.setOpacity(this._container, opacity);
		
	}
};